<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>预订人信息</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style/index.css" />
    <style>
        .aui-radio:checked,
        .aui-radio.aui-checked {
            background-color: #69ca74;
            border: solid 1px #69ca74;
        }

        .fill-list .aui-list .aui-list-item .aui-list-item-inner b {
            font-weight: bold;
            display: block;
        }

        .list-item-con {
            width: 100%;
            height: 75px;
            position: relative;
            overflow-x: auto;
            border-bottom: 1px solid #f5f5f5;
            background: #fff
        }

        .list-item-con::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .list-item-box {
            width: auto;
            margin-top: 0;
            height: 75px;
            margin-left: 0;
            position: relative;
        }

        .list-btn {
            width: 90px;
            height: 75px;
            position: absolute;
            top: 0;
            right: 0;
            line-height: 75px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            background: red;
        }

        .list-item {
            width: 100%;
            height: 75px;
            position: absolute;
            left: 0;
            border-bottom: 1px solid #f5f5f5
        }

        .list-item .checkStatus {
            float: right;
            width: 20%;
            height: 75px;
            line-height: 75px;
            font-size: 14px;
            box-sizing: border-box;
            text-align: center;
            z-index: 9999
        }

        .list-inner {
            padding-left: 15px;
            padding-right: 15px;
            height: 100%;
            width: 70%;
            float: left;
        }

        .list-inner b {
            height: 30px;
            line-height: 30px;
            font-weight: bold;
            font-size: 16px;
            width: 100%;
            display: block;
            padding-top: 5px;
        }

        .list-inner .fill-text {
            padding-top: 10px;
            height: 30px;
            width: 100%;
        }

        .list-inner .fill-text img {
            float: left;
            width: 15px;
            height: 15px;
            margin-top: 4px;
            margin-right: 5px;
        }

        .list-inner .fill-text em {
            color: #aaaaaa;
            float: left;
            text-align: left;
            line-height: 24px;
            font-size: 13px;
        }

        .pull-left-animate {
            animation: pullleft .5s forwards;
        }

        .pull-right-animate {
            animation: pullright .5s forwards;
        }

        @keyframes pullleft {
            from {
                left: 0;
            }
            to {
                left: -90px;
            }
        }

        @keyframes pullright {
            from {
                left: -90px;
            }
            to {
                left: 0;
            }
        }

    </style>
</head>

<body>
    <div id="mian-warp">
        <div class="ticket-add" style="margin-top:0rem;"> <b>添加预定人</b> </div>
        <div class="ticket-adimc"><img src="../../image/common/add.png" onclick="fnOpenAddCustomerPage()" tapmode></div>
        <div class="fill-list">
            <div class="aui-content aui-margin-b-15">
                <div class="aui-list aui-select-list" id="cusLists">
                    <!-- <div class="list-item-box">
                        <div class="list-item">
                            <div class="list-inner">
                                <b>田震兴</b>
                                <div class="fill-text">
                                    <img src="../../image/common/person.jpg"> <em>2107**********1113</em>
                                </div>
                            </div>
                            <div class="checkStatus"> 已验证 </div>
                        </div>
                        <div class="list-btn">
                            删除
                        </div>
                    </div> -->


                    <!-- <div class="aui-list-item">
                        <div class="aui-list-item-inner"> <b>田震兴</b>
                            <div class="fill-text"> <img src="../../image/common/person.jpg"> <em>2107**********1113</em> </div>
                        </div>
                        <div class="aui-list-item-label fill-validation"> 已验证 </div>
                    </div> -->
                </div>
            </div>
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/template" id="cus">
    {{~ it:value:index}}

    {{? value.userStatus == 1}}
    <div class="list-item-box">
    {{??}}
    <div class="list-item-box canslide-box">
    {{?}}
        <div class="list-item">
            <div class="list-inner">
                <b>{{= value.userName}}</b>
                <div class="fill-text">
                    <img src="../../image/common/person.jpg"> <em>{{= value.idNumber}}</em>
                </div>
            </div>
            {{ if(value.userStatus == 1){ }}
            <div class="checkStatus"> 已验证 </div>
            {{ }else{ }}
            <div class="checkStatus"> 未验证 </div>
            {{ } }}
        </div>
        {{? value.userStatus != 1}}
        <div class="list-btn" data-no="{{= value.personNo}}" onclick="fnDeleteCus(this)" tapmode>
            删除
        </div>
        {{?}}
    </div>
    {{~}}
</script>
<script type="text/javascript">
    var $S;
    var USER;
    var vPageNo = 1; //当前页码
    var vPageSize = 10; //每页条数
    var vFirstPage;
    apiready = function() {
        fnInitPage()
        fnInitList()
    };

    //左滑删除功能
    function fnInitList() {
        var tListBoxDom1 = $api.domAll($api.byId('cusLists'), '.list-item-box');
        for (var i = 0; i < tListBoxDom1.length; i++) {
            var tListItem = $api.dom(tListBoxDom1[i], '.list-item');
            var tListBtn = $api.dom(tListBoxDom1[i], '.list-btn');
            var tWinWidth = api.frameWidth;
            $api.css(tListItem, 'width:' + tWinWidth + 'px');
            $api.css(tListBoxDom1[i], 'width:' + (tWinWidth + 90) + 'px');
            // $api.css(tListBoxDom[i], 'left:-90px')
        }
        var tListBoxDom = $api.domAll($api.byId('cusLists'), '.canslide-box');
        var tLen = tListBoxDom.length;
        var tLastX, tLastXForMobile;
        var tPressedObj, tLastLeftObj;
        var tStart; //按下的点

        for (var j = 0; j < tLen; j++) {
            tListBoxDom[j].addEventListener('touchstart', function(e) {
                tLastXForMobile = e.changedTouches[0].pageX;
                tPressedObj = this; //按下的对象
                // 记录开始按下时的点
                var touches = event.touches[0];
                tStart = {
                    x: touches.pageX, // 横坐标
                    y: touches.pageY // 纵坐标
                };
            })

            tListBoxDom[j].addEventListener('touchmove', function(e) {
                //计算滑动过成功xy变化
                var touches = event.touches[0];
                delta = {
                    x: touches.pageX - tStart.x,
                    y: touches.pageY - tStart.y
                }

                //横向位移大于纵向位移，禁止纵向滚动
                if (Math.abs(delta.x) > Math.abs(delta.y)) {
                    event.preventDefault();
                }
            });

            tListBoxDom[j].addEventListener('touchend', function(e) {
                if (tLastLeftObj && tPressedObj != tLastLeftObj) { //点击除当前做滑块外其他区域
                    $api.removeCls(tLastLeftObj, 'pull-left-animate');
                    $api.addCls(tLastLeftObj,'pull-right-animate');
                    tLastLeftObj = null;
                }
                var diffX = e.changedTouches[0].pageX - tLastXForMobile;
                if(diffX < -100){
                   if($api.hasCls(tPressedObj, 'pull-right-animate')){
                     $api.removeCls(tPressedObj, 'pull-right-animate')
                   }
                   $api.addCls(tPressedObj, 'pull-left-animate');
                   if(tLastLeftObj && tLastLeftObj != tPressedObj){
                     $api.removeCls(tLastLeftObj, 'pull-left-animate');
                     $api.addCls(tLastLeftObj, 'pull-right-animate');
                   }
                    tLastLeftObj = tPressedObj;
                }else if(diffX > 100){
                   if(tPressedObj == tLastLeftObj){
                     $api.removeCls(tPressedObj, 'pull-left-animate');
                     $api.addCls(tPressedObj, 'pull-right-animate');
                     tLastLeftObj = null;
                   }
                }
            })
        }
    }



    //页面初始化
    function fnInitPage() {
        USER = USER();
        $S = SERVICE();

        fnGetCustomerList();
        // fnAddHeaderRefreshingEvent(function() { //设置下拉刷新
        //     fnGetCustomerList('headerRefreshing');
        // });
        fnAddFooterLoadingEvent(function() { // 设置上拉加载
            fnGetCustomerList('load');
        });
    }
    // /******************************************
    //         模板
    // ******************************************/
    // function fnInitList() {
    //     var tItemBox = $api.domAll('.list-item-box');
    //     var tItemW = api.winWidth;
    //     for (var i = 0; i < tItemBox.length; i++) {
    //         $api.css(tItemBox[i], tItemW + 90)
    //     }
    // }
    // /******************************************/
    // /******************************************
    //         获取预订人信息列表
    // ******************************************/
    // //获取预订人信息列表
    function fnGetCustomerList(pSign) {
        var tCusList = $api.byId('cusLists');
        var tTplHtml = $api.html($api.byId('cus'));

        if ('load' != pSign) {
            vPageNo = 1;
        }
        fnCustomerListRequest(function(ret, err) {
            if (ret) {
                if (ret.errcode && '200' == ret.errcode) {
                    if (ret.data.listData.length && ret.data.listData.length > 0) {
                        if ('load' != pSign) { //第一次加载、下拉刷新
                            api.refreshHeaderLoadDone();
                            vPageNo = vPageNo + 1;
                            if (JSON.stringify(vFirstPage) == JSON.stringify(ret.data.listData)) {
                                api.toast({
                                    msg: '没有最新数据了',
                                    duration: 2000,
                                    location: 'bottom'
                                });
                                return
                            }
                            vFirstPage = ret.data.listData;
                            var tLists = doT.template(tTplHtml)(ret.data.listData);
                            console.log(2222222);
                            $api.html(tCusList, '');
                            $api.append(tCusList, tLists);
                            fnInitList();

                        } else { //普通加载
                            var tLists = doT.template(tTplHtml)(ret.data.listData);
                            $api.append(tCusList, tLists);
                            fnInitList();
                            vPageNo = vPageNo + 1;
                        }
                    } else {
                        if ('load' == pSign) {
                            api.refreshHeaderLoadDone();
                            api.toast({
                                msg: '没有更多数据了',
                                duration: 2000,
                                location: 'bottom'
                            });
                        } else {
                            api.refreshHeaderLoadDone();
                            api.toast({
                                msg: '暂无数据',
                                duration: 2000,
                                location: 'bottom'
                            });
                        }
                    }
                } else {
                    if (ret.errmsg) {
                        api.toast({
                            msg: ret.errmsg,
                            duration: 2000,
                            location: 'bottom'
                        });
                    } else {
                        api.toast({
                            msg: '获取预订人信息失败',
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                }
            } else {
                api.toast({
                    msg: '获取预订人信息失败',
                    duration: 2000,
                    location: 'bottom'
                });

            }
        })
    }
    //删除预订人
    function fnDeleteCus(pEl){
       var tPersonNo = pEl.dataset.no;
       fnDelCusRequest(tPersonNo,function(ret,err){
          if(ret){
            if(ret.errcode && '200' == ret.errcode){
               var tParent = pEl.parentNode;
               setTimeout(function(){
                 $api.remove(tParent);
                 api.toast({
                     msg: '删除预订人成功',
                     duration: 2000,
                     location: 'bottom'
                 });
               },300)
            }else{
               api.toast({
                   msg: '删除预订人失败',
                   duration: 2000,
                   location: 'bottom'
               });

            }
          }else{
             api.toast({
                 msg: '网络错误',
                 duration: 2000,
                 location: 'bottom'
             });

          }
       })
    }

    // //请求列表接口
    function fnCustomerListRequest(pCallback) {
        var tCustId = USER.Get('custId');
        var tUrl = "sp/mine/getReserve";
        var tParam = {
            custId: tCustId,
            pageNo: vPageNo,
            pageSize: vPageSize

        }
        $S.POST(tUrl, JSON.stringify(tParam), pCallback)
    }

    //删除预订人接口
    function fnDelCusRequest(pPersonNo,pCallback){
       var tUrl = 'sp/mine/delReserve';
       var tParam = {
            personNo:pPersonNo
       }
       $S.POST(tUrl,JSON.stringify(tParam),pCallback)
    }


    // /******************************************/
    // /******************************************
    //         模板
    // ******************************************/
    //
    //
    //
    //
    //
    //
    // /******************************************/
    //打开添加联系人界面
    function fnOpenAddCustomerPage() {

        var tParam = {
            name: 'add_frequent_header_win',
            url: './add_frequent_header_win.html'
        }
        fnOpenWin(tParam)
    }
</script>

</html>
